画像と文字の配置(1) alignで位置を指定する
今回は、画像と文字の配置を指定する方法を紹介します。画像と文字は、ホームページを構成する基本的な要素であるだけに、配置に関するテクニックをどれだけ知っているかがレイアウトの優劣を決める大きな要因となります。役に立つ場面も多くあると思うので、ぜひともマスターするようにしてください。

→ 画像と文字の縦位置を指定する
 
まずは、縦方向について画像と文字の位置を指定する方法を紹介します。HTMLの初期設定では、画像と文字が下揃えで配置される仕組みになっています。これを上揃えに変更する場合は、IMGタグに「align="top"」という属性を追加します。同様に、IMGタグのalign属性に「middle」を指定すると、画像の中央に揃えて文字が配置されます。なお、この指定が有効となるのは文字の1行目だけで、2行目以降は画像の下に配置されます。
<IMG src="taxi.jpg" align="top">
<IMG src="taxi.jpg" align="middle">


→ 画像と文字の横位置を指定する(回り込み)
 
IMGタグに追加するalign属性は、横方向について画像と文字の配置を指定する場合にも利用します。画像を左側に配置する場合は「align="left"」、画像を右側にに配置する場合は「align="right"」をIMGタグに追加します。なお、この場合は、文字が“回り込み”で処理されます。
<IMG src="taxi.jpg" align="left">
<IMG src="taxi.jpg" align="right">


→ 表と文字の位置を指定する
 
align属性は、TABLEタグで作成した表と文字の配置にも利用できます。この場合、TABLEタグにalign属性を追加します。align属性に指定可能な値は画像の場合と同じで、縦方向や横方向について文字の配置を指定することができます。
<TABLE border="1" align="right">
  :
  :
</TABLE>

※今回の講座で紹介したテクニックは、極めて基本的な指定方法となります。このため、思いどおりに画像と文字を配置できない場合もあると思います。そこで、次回の講座では、回り込みの解除や画像と文字の間隔など、さらに詳しく配置を指定する方法を紹介します。


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze